<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>v-show原理解析</title>
  </head>
  <body>
    <div v-if="isIf">我是v-if</div>
    <div v-else>我是v-else</div>
    <button onclick="model.isIf = true">显示if</button>
    <button onclick="model.isIf = false">显示else</button>
    <script>
      var model = {
        isIf: false,
      }
      // 拿到要操作的元素----定义数据和视图
      var view = document.getElementsByTagName('div')
      console.log('view',view)
      // 定义一个方法，通过给元素增加display:none来控制他的显示与隐藏-----定义视图刷新方法
      var updateView = function(value){
        view[0].style.display = value? '': 'none'
        view[1].style.display = value? 'none': ''
      }
      // 获取到元素的属性----设置视图初始化
      var directiveKey = view[0].getAttribute('v-if')
      console.log('directiveKey',directiveKey)
      // 改变选中view的显示与隐藏
      updateView(model[directiveKey])

      // 监听数据变化，然后刷新视图，达到数据驱动的目的
      Object.defineProperty(model, 'isIf', {
        set: function(val){
          updateView(val)
        }
      })
    </script>
  </body>
</html>